<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fecth RESTFul</title>
  </head>

  <body>
    <script>
      //1. 传统的get传参数的方式
      //根据id值查询员工的信息
      fetch("http://localhost:3000/emp?id=1001", {
        method: "get",
      })
        .then((data) => data.text())
        .then((data) => void console.log(data));

      //2. RESTFul的get方式
      fetch("http://localhost:3000/emp/1001", {
        method: "get",
      })
        .then((data) => data.text())
        .then((data) => void console.log(data));
      //3. 通过delete请求删除数据
      fetch("http://localhost:3000/emp/1001", {
        method: "delete",
      })
        .then((data) => data.text())
        .then((data) => void console.log(data));

      //4. 通过post请求删除数据
      fetch("http://localhost:3000/emp", {
        method: "post",
        body: "name=zs&pwd=250", //提交的数据
        headers: {
          "Content-type": "application/x-www-form-urlencoded",
        },
      })
        .then((data) => data.text())
        .then((data) => void console.log(data));
     
      //post向服务器传递一个json格式的数据
      fetch("http://localhost:3000/emp", {
        method: "post",
        body: JSON.stringify({name:'haoren',pwd:'250'}), //提交的数据
        headers: {
          "Content-type": "application/json",
        },
      })
        .then((data) => data.text())
        .then((data) => void console.log(data));

      //put更新数据
      fetch("http://localhost:3000/emp/1001", {
        method: "put",
        body: JSON.stringify({name:'haoren2'}), //提交的数据
        headers: {
          "Content-type": "application/json",
        },
      })
        .then((data) => data.text())
        .then((data) => void console.log(data));
    </script>
  </body>
</html>
